<template>
  <div>
    <!-- 登录之前的遮罩层 -->
    <div id="g_top" class="m-top">&nbsp;</div>
    <div class="g-bd1 g-bd-full" v-if="!$store.state.userId ? true : false">
      <div class="n-pglg2">
        <div class="welc">
          你可以关注明星和好友品味他们的私房歌单<br />通过他们的动态发现更多精彩音乐
        </div>
      </div>
    </div>
    <!-- 登陆后的主体 -->
    <div class="g-bd5 f-cb" v-if="$store.state.userId ? true : false">
      <loading v-if="loading_flag"></loading>
      <!-- 左边动态模块 -->
      <div class="g-mn5" v-if="eventData.length">
        <div class="g-mn5c">
          <div class="g-wrap8">
            <!-- 头部动态 -->
            <div class="m-timeline-title u-title f-cb">
              <h3><span class="f-ff2">动态</span></h3>
              <span
                class="btn u-dicn u-dicn-40 f-fr f-pr"
                id="pubVideo"
                title="发布视频"
              ></span>
              <span
                class="btn u-dicn u-dicn-38 f-fr"
                id="pubEvent"
                title="发动态"
              ></span>
            </div>
            <div class="m-timeline">
              <ul class="m-dlist j-flag">
                <li class="itm" v-for="(item, index) in eventData" :key="index">
                  <!-- 发布者头像 1-->
                  <div class="gface">
                    <a href="javascript:;" class="ficon">
                      <img class="j-flag" :src="item.user.avatarUrl" />
                    </a>
                  </div>
                  <div class="gcnt j-flag">
                    <div class="dcntc">
                      <!--发布者名字 2-->
                      <div class="type f-pr f-fs1">
                        <a
                          href="javascript:;"
                          class="s-fc7"
                          @click="to_userHome(item.user.userId)"
                          >{{ item.user.nickname }}</a
                        >
                        <span class="sep s-fc3">{{ item.type | name }}</span>
                      </div>
                      <!-- 发布时间 3-->
                      <div class="time">
                        <a
                          class="s-fc4"
                          data-action="logdetail"
                          href="javascript:;"
                          >{{ item.showTime | time }}</a
                        >
                      </div>
                      <!-- 标题 -->
                      <div class="text f-fs1 f-brk j-text">
                        {{ item.program.msg }}
                      </div>
                      <!-- 内容 4-->
                      <div class="j-flag">
                        <!-- mv -->
                        <div class="src src-video f-cb" v-if="item.type == 21">
                          <!-- 正常 小屏幕状态 -->
                          <div class="video f-pr j-flag" v-show="!item.flag">
                            <div class="info f-pa">
                              <div class="tit u-dicn u-dicn-17">
                                <p class="f-thide2">
                                  <i class="icn u-dicn u-dicn-48"></i>
                                  <span class="h3 f-pre">{{
                                    item.program.mv.name
                                  }}</span>
                                  <span class="h4">
                                    -
                                    <a
                                      href="javascript:;"
                                      v-for="(aitem, aindex) in item.program.mv
                                        .artists"
                                      :key="aindex"
                                      >{{ aitem.name }}
                                      <slot
                                        v-if="
                                          index <
                                          item.program.mv.artists.length - 1
                                        "
                                        >/</slot
                                      >
                                    </a>
                                  </span>
                                </p>
                              </div>
                              <div class="bottom u-dicn-49">
                                <span class="f-fl"
                                  ><i class="icn u-dicn u-dicn-43"></i
                                  >{{ item.program.mv.playCount }}
                                </span>
                              </div>
                              <i
                                class="ply u-dicn u-dicn-42 f-alpha"
                                @click="video_open(index)"
                              ></i>
                            </div>
                            <img
                              class="f-img"
                              :src="item.program.mv.imgurl+'?param=338y189'"
                            />
                          </div>
                          <!-- 中等屏幕的头部选项 关闭 分享 作者....... -->
                          <div class="fold f-cb j-flag" v-show="item.flag">
                            <span
                              class="btn s-fc3 f-fl"
                              @click="item.flag = false"
                              ><i class="icn u-dicn u-dicn-18"></i>
                              <a href="javascript:;">收起</a></span
                            >
                            <span class="sep f-fl"></span>
                            <div class="inf f-thide s-fc3">
                              <a href="javascript:;" class="btn s-fc3"
                                ><i class="icn u-dicn u-dicn-35"></i
                                >{{ item.program.mv.name }}
                              </a>
                              <a
                                href="javascript:;"
                                class="sub s-fc4"
                                v-for="(Aitem, Aindex) in item.program.mv
                                  .artists"
                                :key="Aindex"
                                >{{ Aitem.name }}
                                <slot
                                  v-if="
                                    Aindex < item.program.mv.artists.length - 1
                                  "
                                  >/</slot
                                >
                              </a>
                            </div>
                          </div>
                           <!-- 中等屏幕播放 -->
                          <div style="width: 565px; height: 317.812px" v-if="item.flag">
                            <myVideo :itemData="item"></myVideo>
                          </div>
                        </div>
                        <!-- video -->
                        <div class="src src-video f-cb" v-if="item.type == 41">
                            <!-- 正常 小屏幕状态 -->
                          <div class="video f-pr j-flag" v-show="!item.flag">
                            <div class="info f-pa">
                              <div class="tit u-dicn u-dicn-17">
                                <p class="f-thide2">
                                  <span class="h3"
                                    >{{ item.program.video.title }}
                                  </span>
                                  <span class="h4"
                                    >{{ item.program.video.creator.nickname }}
                                  </span>
                                </p>
                              </div>
                              <div class="bottom u-dicn-49">
                                <span class="f-fl"
                                  ><i class="icn u-dicn u-dicn-43"></i
                                  >{{ item.program.video.playTime }}</span
                                >
                              </div>
                              <i
                                class="ply u-dicn u-dicn-42 f-alpha"
                                @click="video_open(index)"
                              ></i>
                            </div>
                            <img
                              class="f-img"
                              :src="item.program.video.coverUrl+'?param=338y189'"
                            />
                          </div>
                            <!-- 中等屏幕的头部选项 关闭 分享 作者....... -->
                          <div class="fold f-cb j-flag" v-show="item.flag">
                            <span
                              class="btn s-fc3 f-fl"
                              @click="item.flag = false"
                              ><i class="icn u-dicn u-dicn-18"></i>
                              <a href="javascript:;">收起</a></span
                            >
                            <span class="sep f-fl"></span>
                            <div class="inf f-thide s-fc3">
                              <a href="javascript:;" class="btn s-fc3"
                                ><i class="icn u-dicn u-dicn-35"></i
                                >{{ item.program.video.title }}</a
                              >
                              <a href="javascript:;" class="sub s-fc4">{{
                                item.program.video.creator.nickname
                              }}</a>
                            </div>
                          </div>
                           <!-- 中等屏幕播放 -->
                          <div style="width: 565px; height: 317.812px" v-if="item.flag">
                            <myVideo :itemData="item"></myVideo>
                          </div>
                        </div>
                        <!--节目 -->
                        <div v-if="item.type == 17">
                           <div class="src f-cb">
                            <!-- 头像 -->
                            <div class="cover cover-ply">
                              <img :src="item.program.program.coverUrl" />
                              <a
                                href="javascript:;"
                                class="Vply"
                                @click="
                                  send_dj(item.program.program.id, $event)
                                "
                              ></a>
                            </div>
                            <!-- 内容 -->
                            <div class="scnt">
                              <h3 class="f-fs1 f-thide">
                                <a href="javascript:;" class="Vs-fc1">{{
                                  item.program.program.name
                                }}</a>
                              </h3>
                              <h4 class="from f-thide s-fc3">
                                <span class="tag u-dtag"
                                  >{{ item.program.program.radio.category }}
                                  <i class="rt"></i
                                ></span>
                                <a href="javascript:;" class="s-fc3">{{
                                  item.program.program.dj.nickname
                                }}</a>
                              </h4>
                            </div>
                           </div>
                            <!-- 节目的照片模块 -->
                           <div class="picture" v-if="item.pics.length">
                            <ul class="pics f-cb" v-show="!item.flag">
                            <li  :class="['pic' , {'pic-wide':item.pics.length == 1} ,{'pic-s':item.pics.length > 1},{'clear':(P_index+1)%3 == 1}]" v-for="(P_item , P_index) in item.pics" :key="P_index">
                              <img :src="P_item.pcSquareUrl +'?param=338x0&quality=100'"  class="f-img j-img f-curbig"  @click.stop="item_options(item ,P_index )" >
                            </li>
                            </ul>
                            <enlargeImg :data="item" v-show="item.flag"></enlargeImg>
                           </div>
                        </div>
                        <!-- 歌手 -->
                        <div v-if="item.type == 36">
                          <div class="src f-cb">
                            <!-- 头像 -->
                            <a href="javascript:;" class="cover cover-ply">
                              <img :src="item.program.resource.picUrl" />
                            </a>
                            <!-- 内容 -->
                            <span class="scnt f-thide line f-fs1">
                              歌手：
                              <router-link :to="{path:'/home/artistDetails' , query:{id: item.program.resource.id}}" class="s-fc3"
                                >{{ item.program.resource.name }}
                              </router-link>
                            </span>
                          </div>
                           <!-- 歌手的照片模块 -->
                           <div class="picture" v-if="item.pics.length">
                            <ul class="pics f-cb" v-show="!item.flag">
                            <li  :class="['pic' , {'pic-wide':item.pics.length == 1} ,{'pic-s':item.pics.length > 1},{'clear':(P_index+1)%3 == 1}]" v-for="(P_item , P_index) in item.pics" :key="P_index">
                              <img :src="P_item.pcSquareUrl +'?param=338x0&quality=100'"  class="f-img j-img f-curbig"  @click.stop="item_options(item ,P_index )" >
                            </li>
                            </ul>
                            <enlargeImg :data="item" v-show="item.flag"></enlargeImg>
                          </div>
                        </div>
                        <!-- 电台 -->
                        <div v-if="item.type == 28">
                          <div class="src f-cb">
                            <a href="javascript:;" class="cover cover-ply">
                              <img :src="item.program.djRadio.picUrl" />
                            </a>
                            <div class="scnt">
                              <h3 class="f-fs1 f-thide">
                                <span data-v-fd71a7f6="" class="tag u-dtag"
                                  >{{ item.program.djRadio.category }}
                                  <i data-v-fd71a7f6="" class="rt"></i
                                ></span>
                                <a href="javascript:;" class="s-fc1"
                                  >{{ item.program.djRadio.name }}
                                </a>
                              </h3>
                              <h4 class="from f-thide s-fc3">
                                by
                                <a href="javascript:;" class="s-fc3"
                                  >{{ item.program.djRadio.dj.nickname }}
                                </a>
                              </h4>
                            </div>
                          </div>
                           <!-- 电台的照片模块 -->
                           <div class="picture" v-if="item.pics.length">
                            <ul class="pics f-cb" v-show="!item.flag">
                            <li  :class="['pic' , {'pic-wide':item.pics.length == 1} ,{'pic-s':item.pics.length > 1},{'clear':(P_index+1)%3 == 1}]" v-for="(P_item , P_index) in item.pics" :key="P_index">
                              <img :src="P_item.pcSquareUrl +'?param=338x0&quality=100'"  class="f-img j-img f-curbig"  @click.stop="item_options(item ,P_index )" >
                            </li>
                            </ul>
                            <enlargeImg :data="item" v-show="item.flag"></enlargeImg>
                          </div>
                        </div>
                        <!-- 歌单 -->
                        <div v-if="item.type == 13">
                          <div class="src f-cb">
                            <a href="javascript:;" class="cover cover-ply" @click.stop="play(item.program.playlist.id)">
                              <img :src="item.program.playlist.coverImgUrl" />
                              <span class="Vply"></span>
                            </a>
                            <div class="scnt">
                              <h3 class="f-fs1 f-thide">
                                <span data-v-fd71a7f6="" class="tag u-dtag"
                                  >{{ "歌单" }}
                                  <i data-v-fd71a7f6="" class="rt"></i
                                ></span>
                                <a href="javascript:;" class="s-fc1"
                                  >{{ item.program.playlist.name }}
                                </a>
                              </h3>
                              <h4 class="from f-thide s-fc3">
                                by
                                <a href="javascript:;" class="s-fc3"
                                  >{{ item.program.playlist.creator.nickname }}
                                </a>
                              </h4>
                            </div>
                          </div>
                            <!-- 歌单的照片模块 -->
                           <div class="picture" v-if="item.pics.length">
                            <ul class="pics f-cb" v-show="!item.flag">
                            <li  :class="['pic' , {'pic-wide':item.pics.length == 1} ,{'pic-s':item.pics.length > 1},{'clear':(P_index+1)%3 == 1}]" v-for="(P_item , P_index) in item.pics" :key="P_index">
                              <img :src="P_item.pcSquareUrl +'?param=338x0&quality=100'"  class="f-img j-img f-curbig"  @click.stop="item_options(item ,P_index )" >
                            </li>
                            </ul>
                            <enlargeImg :data="item" v-show="item.flag"></enlargeImg>
                          </div>
                        </div>
                        <!-- 单曲 -->
                        <div v-if="item.type == 18">
                          <!-- 单曲的内容模块 -->
                          <div class="src f-cb">
                            <div class="cover cover-ply">
                              <img :src="item.program.song.album.picUrl" />
                              <a href="javascript:;" class="Vply" @click.stop="sendID(item.program.song.id , $event)"></a>
                            </div>
                            <div class="scnt">
                              <h3 class="f-fs1 f-thide">
                                <a href="javascript:;" class="s-fc1"
                                  >{{ item.program.song.name }}
                                </a>
                              </h3>
                              <h4 class="from f-thide s-fc3">
                                <a
                                  href="javascript:;"
                                  class="s-fc3"
                                  v-for="(Aitem, index) in item.program.song
                                    .artists"
                                  :key="index"
                                  >{{ Aitem.name }}
                                  <slot
                                    v-if="
                                      index <
                                      item.program.song.artists.length - 1
                                    "
                                    >/</slot
                                  ></a
                                >
                              </h4>
                            </div>
                          </div>
                          <!-- 单曲的照片模块 -->
                           <div class="picture" v-if="item.pics.length">
                            <ul class="pics f-cb" v-show="!item.flag">
                            <li  :class="['pic' , {'pic-wide':item.pics.length == 1} ,{'pic-s':item.pics.length > 1},{'clear':(P_index+1)%3 == 1}]" v-for="(P_item , P_index) in item.pics" :key="P_index">
                              <img :src="P_item.pcSquareUrl +'?param=338x0&quality=100'"  class="f-img j-img f-curbig"  @click.stop="item_options(item ,P_index )" >
                            </li>
                            </ul>
                            <enlargeImg :data="item" v-show="item.flag"></enlargeImg>
                          </div>
                        </div>
                        <!-- 专辑 -->
                        <div v-if="item.type == 19">
                           <div class="src f-cb">
                            <a href="javascript:;" class="cover cover-ply">
                              <img :src="item.program.album.picUrl" />
                            </a>
                            <div class="scnt">
                              <h3 class="f-fs1 f-thide">
                                <span data-v-fd71a7f6="" class="tag u-dtag"
                                  >{{ "专辑" }}
                                  <i data-v-fd71a7f6="" class="rt"></i
                                ></span>
                                <a href="javascript:;" class="s-fc1"
                                  >{{ item.program.album.name }}
                                </a>
                              </h3>
                              <h4 class="from f-thide s-fc3">
                                <a
                                  href="javascript:;"
                                  class="s-fc3"
                                  v-for="(Aitem, index) in item.program.album
                                    .artists"
                                  :key="index"
                                  >{{ Aitem.name
                                  }}<slot
                                    v-if="
                                      index <
                                      item.program.album.artists.length - 1
                                    "
                                  >
                                    /
                                  </slot>
                                </a>
                              </h4>
                            </div>
                           </div>
                            <!-- 专辑的照片模块 -->
                          <div class="picture" v-if="item.pics.length">
                            <ul class="pics f-cb" v-show="!item.flag">
                            <li  :class="['pic' , {'pic-wide':item.pics.length == 1} ,{'pic-s':item.pics.length > 1},{'clear':(P_index+1)%3 == 1}]" v-for="(P_item , P_index) in item.pics" :key="P_index">
                              <img :src="P_item.pcSquareUrl +'?param=338x0&quality=100'"  class="f-img j-img f-curbig"  @click.stop="item_options(item ,P_index )" >
                            </li>
                            </ul>
                            <enlargeImg :data="item" v-show="item.flag"></enlargeImg>
                          </div>
                        </div>
                        <!-- 动态 -->
                        <div v-if="item.type == 35">
                          <!-- 动态里面的照片模块 -->
                           <div class="picture" v-if="item.pics.length">
                            <ul class="pics f-cb" v-show="!item.flag">
                            <li  :class="['pic' , {'pic-wide':item.pics.length == 1} ,{'pic-s':item.pics.length > 1},{'clear':(P_index+1)%3 == 1}]" v-for="(P_item , P_index) in item.pics" :key="P_index">
                              <img :src="P_item.pcSquareUrl +'?param=338x0&quality=100'"  class="f-img j-img f-curbig"  @click.stop="item_options(item ,P_index )" >
                            </li>
                            </ul>
                            <enlargeImg :data="item" v-show="item.flag"></enlargeImg>
                          </div>
                        </div>
                      </div>
                      <!-- 转发 评论 点赞 5-->
                      <div class="doper j-flag">
                        <a
                          href="javascript:;"
                          class="s-fc7"
                          style="margin-right: 10px"
                        >
                          <i
                            :class="[
                              'icn',
                              'u-dicn',
                              { 'u-dicn-3': !item.info.liked },
                              { 'u-dicn-5': item.info.liked },
                            ]"
                            @click="like(item.info.threadId, item.info.likedCount, item.info.liked, index)"
                          ></i>
                          <span class="j-flag"
                            >({{ item.info.likedCount }})</span
                          >
                        </a>
                        <a href="javascript:;" class="s-fc7">
                          评论
                          <span class="j-flag">{{
                            item.info.commentCount == 0
                              ? ""
                              : "(" + item.info.commentCount + ")"
                          }}</span>
                        </a>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <!-- 右边关于我的模块 -->
      <div class="g-sd5" v-if="eventData.length">
        <div class="n-frduser">
          <a href="javascript:;" class="face">
            <img :src="$store.state.profile" alt="" />
          </a>
          <h5 class="f-thide">
            <router-link :to="{path:'/userHome' , query:{id:$store.state.userId}}" class="s-fc1 f-fs1">{{
              $store.state.nickName
            }}</router-link>
          </h5>
          <ul class="f-cb">
            <li>
              <router-link :to="{path:'/userEvent' , query:{id:'554463981'}}">
                <em>{{ $store.state.eventCount }}</em>
                <i>动态</i>
              </router-link>
            </li>
            <li>
              <router-link :to="{path:'/userFollows' , query:{id:'554463981'}}">
                <em>{{ $store.state.follows }}</em>
                <i>关注</i>
              </router-link>
            </li>
            <li>
              <router-link :to="{path:'/userFans' , query:{id:'554463981'}}">
                <em>{{ $store.state.followeds }}</em>
                <i>粉丝</i>
              </router-link>
            </li>
          </ul>
        </div>
        <div class="g-wrap8">
          <div class="n-frdlist n-frdlist-1">
            <div class="hd f-cb">
              <h4>明星用户</h4>
            </div>
            <ul>
              <li title="没有api 无法点击">
                <img
                  src="http://p1.music.126.net/bZCo49t_TTtXACmfsKjlRw==/109951164033837370.jpg?param=45y45"
                />
                <div class="cnt">
                  <span>斯琴高丽 <sup class="u-icn u-icn-1"></sup></span>
                  <div class="info f-thide j-flag" title="著名歌手、演员">
                    著名歌手、演员
                  </div>
                </div>
              </li>
              <li title="没有api 无法点击">
                <img
                  src="http://p1.music.126.net/BUtewT2sxuf2HwsxOfC2Fg==/1376588571306706.jpg?param=45y45"
                />
                <div class="cnt">
                  <span>袁弘<sup class="u-icn u-icn-1"></sup></span>
                  <div class="info f-thide j-flag" title="著名歌手、演员">
                    演员，作品《步步惊心》《秀丽江山》等
                  </div>
                </div>
              </li>
              <li title="没有api 无法点击">
                <img
                  src="http://p1.music.126.net/acs4PVyZ28X23ZL8GwUaeQ==/109951165865707243.jpg?param=45y45"
                />
                <div class="cnt">
                  <span>叶蓓<sup class="u-icn u-icn-1"></sup></span>
                  <div class="info f-thide j-flag" title="著名歌手、演员">
                    知名女歌手
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div></div>
    </div>
  </div>
</template>

<script>
import { event } from "../../network/user";
import { resource_like, user_detail } from "../../network/user";
import { formatMonth } from "../../components/tool/tool";

import enlargeImg from './friend_enlargeImg.vue'
import myVideo from "../../components/Video/video.vue";
import loading from "../../components/Loading/Loading.vue";
export default {
  data() {
    return {
      eventData: [], //动态数据
      loading_flag: true,
      lasttime: null, //返回数据的 lasttime ,默认-1,传入上一次返回结果的 lasttime,将会返回下一页的数据
    };
  },
  components: {
    myVideo,
    enlargeImg,
    loading,
  },
  methods: {
    like(id, likedCount, liked, index) {
      //点赞
      if (!liked) {
        resource_like(6, 1, id).then((res) => {
          this.eventData[index].info.liked = true;
          this.eventData[index].info.likedCount++;
        });
      } else {
        resource_like(6, 0, id).then((res) => {
          this.eventData[index].info.liked = false;
          this.eventData[index].info.likedCount--;
        });
      }
    },
    resList() {
      //获取动态信息
      event(20, -1).then((res) => {
        console.log(res);
        res.data.event.forEach((item) => {
          var obj = {};
          //单曲18  节目17  专辑19  歌单13  video视频 41  mv 21 电台28  歌手 36 动态35
          obj.program = JSON.parse(item.json);
          obj.flag = false;
          obj.index= 0
          obj.user = item.user;
          obj.info = item.info;
          obj.showTime = item.showTime;
          obj.type = item.type;
          obj.pics = item.pics;
          this.eventData.push(obj);
        });
        this.lasttime = res.data.lasttime;
        this.$nextTick(() => {
          this.loading_flag = false;
        });
      });
    },
    video_open(i) {
      this.eventData.forEach((item, index) => {
        item.flag = false;
        if (index == i) {
          item.flag = true;
        }
      });
    },
    send_dj(id, e) {
      this.$store.dispatch("dj_ct", { dj_id: id, pageY: e.pageY });
    },
    sendID(id ,e){
         this.$store.dispatch("music_ct",{music_id:id , pageY:e.pageY})
    },
    play(id) {
      //点击歌单播放按钮 发送歌单id
       this.$store.dispatch("song_ct",id)
    },
    to_userHome(uid) {
      this.$router.push({ path: "/userHome", query: { id: uid } });
    },
    item_options(item , index){
      item.flag = true
      item.index = index
    }
  },
  filters: {
    time(value) {
      return formatMonth(value);
    },
    name(value) {
      switch (value) {
        case 18:
          return "分享单曲";
        case 17:
          return "分享节目";
        case 19:
          return "分享专辑";
        case 13:
          return "分享歌单";
        case 28:
          return "分享电台";
        case 36:
          return "分享歌手";
        case 41:
          return "分享视频";
        case 21:
          return "分享MV";
      }
    },
  },
  watch: {
    "$store.state.userId": function (value) {
      if (value) {
        this.resList();
      }
    },
  },
  created() {
    if (this.$store.state.userId) {
      this.resList();
    }
  },
};
</script>

<style scoped>
.m-top {
  position: relative;
  z-index: 910;
  height: 72px;
  box-sizing: border-box;
  background: #242424;
  border-bottom: 1px solid #000;
}
@import url("./friend_css/friend_left.css");
@import url("./friend_css/friend_right.css");
</style>